<template>
	<div class="system-role">
		<Modal v-model="showPermissionModal" width="360">
			<p slot="header" style="color:#f60">
				<!-- <Icon type="ios-information-circle"></Icon> -->
				<span>权限详情</span>
			</p>
			<div>
				<p v-for="(item,i) in permissionIds" :key="i">{{item.permissionName}}</p>
			</div>
		</Modal>
		<div class="top">
			<Row :gutter="10" justify="center">
				<Col span="4">
					<Button type="success" icon="md-add" @click="showDrawer=true;">新增</Button>
				</Col>
			</Row>
		</div>
		<Drawer :title="alertTitle" v-model="showDrawer" :width="720" :mask-closable="false">
			<Form ref="form" :model="editedItem" :rules="rules" :label-width="90">
				<Row :gutter="32">
					<!-- <Col :span="24">
						<FormItem label="随访类型键" label-position="left">
							<Input v-if="editedIndex===-1" v-model="editedItem.key" placeholder="" />
							<Input v-else v-model="editedItem.itemKey" placeholder="" />
						</FormItem>
					</Col> -->
                    <Col :span="24" >
						<FormItem label="随访类型" label-position="left" :prop="editedIndex===-1?'value':'itemValue'">
							<Input v-if="editedIndex===-1" v-model="editedItem.value" placeholder="" />
							<Input v-else v-model="editedItem.itemValue" placeholder="" />
						</FormItem>
					</Col>
                    <Col :span="24">
						<FormItem label="描述内容" label-position="left" prop="description">
							<Input class="fs12" type="textarea" v-model="editedItem.description" placeholder="" />
						</FormItem>
					</Col>
				</Row>
			</Form>
			<div class="demo-drawer-footer">
				<Button style="margin-right: 8px" @click="close">取消</Button>
				<Button type="primary" :loading="editedIndex===-1?createLoading:updateLoading" @click="save">保存</Button>
			</div>
		</Drawer>
		<div>
			<div>
				<Table
					:loading="loading"
					highlight-row
					ref="currentRowTable"
					:columns="tableColumns"
					:data="items"
				>
					<template slot-scope="{ row }" slot="sex">
                        <span v-if="Number(row.sex)===1">男</span>
                        <span v-else-if="Number(row.sex)===2">女</span>
                        <span v-else>-</span>
					</template>
					<template slot-scope="{row}" slot="createTime">
						<span>{{row.createTime | YMDHMS}}</span>
					</template>
					<template slot-scope="{row}" slot="updateTime">
						<span>{{row.updateTime | YMDHMS}}</span>
					</template>
					<template slot-scope="{row}" slot="action">
						<Button v-if="row.rolename !== 'ADMIN'" type="primary" size="small" @click="update(row)">修改</Button>
						<Button
							v-if="row.rolename !== 'ADMIN'"
							class="ml10"
							type="primary"
							ghost
							size="small"
							@click="remove(row)"
						>删除</Button>
					</template>
				</Table>
				<!-- <div class="pagination">
					<Page :current="page" :total="totalNum" show-total @on-change="pageChange" />
				</div> -->
			</div>
		</div>
	</div>
</template>
<script>
import { typeFollowQueryList, typeFollowAdd, typeFollowUpdate, typeFollowDelete } from '@api/typeFollow.js'
export default {
	data() {
		return {
            rules:{
                value: [{required: true, message: '请输入随访类型', trigger: 'blur' }],
                itemValue: [{required: true, message: '请输入随访类型', trigger: 'blur' }],
                description: [{required: true, message: '请输入描述内容', trigger: 'blur' }],
            },
			showDrawer: false,
			showPermissionModal: false,
			loading: false,
			createLoading: false,
			updateLoading: false,
			removeLoading: false,
			editedIndex: -1,
			permissionIds: [],
			editedItem: {
                value: '',
                itemKey: '',
                itemValue: '',
				description: '',
			},
			defaultItem: {
                value: '',
                itemKey: '',
                itemValue: '',
				description: '',
			},
			items: [],
			page: 1,
			pageSize: 10,
			totalNum: 0,
			permissionList: [],
			tableColumns: [
				// {
				// 	title: '类型名称',
				// 	width: 200,
				// 	key: 'itemKey'
				// },
				{
					title: '随访类型',
					width: 200,
					key: 'itemValue'
                },
                {
					width: 200,
					title: '描述内容',
					key: 'description'
                },
                {
					width: 200,
					title: '最后操作时间',
					slot: 'updateTime'
				},
				{
					width: 200,
					title: '创建时间',
					slot: 'createTime'
				},
				{
					title: '操作',
					slot: 'action',
					width: 200,
                },
                {
					title: ' ',
					key: '',
				},
			]
		}
	},
	mounted() {
        this.typeFollowQueryList()
        console.log('typeFollowQueryList')
	},
	computed: {
		alertTitle() {
			return this.editedIndex === -1 ? '新增' : '修改'
		}
	},
	methods: {
		pageChange(page) {
			if (this.loading) {
				return
			}
			this.page = page
			this.typeFollowQueryList()
			console.log('page>', page)
		},
		async update(item) {
			const { id } = item
			this.editedIndex = item._index
			this.editedItem = Object.assign({}, item)
			this.showDrawer = true
		},
		create() {
			this.editedIndex = -1
			this.editedItem = Object.assign({}, this.defaultItem)
			this.showDrawer = true
		},
		remove(item, idx) {
			const {id, itemKey, itemValue, description } = item;
			this.removeLoading || (this.removeLoading = true)
			this.$Modal.confirm({
				title: '删除',
				content: `是否删除随访类型: ${itemValue}?`,
				onOk: async () => {
                    const res = await typeFollowDelete({ key: itemKey, })
					this.removeLoading = false
					this.modal(res, '删除')
                    this.typeFollowQueryList()
                    this.$store.dispatch('typeFollowQueryList')
				}
			})
		},
		async save() {
			if (this.editedIndex > -1) {
                const {id, itemKey, itemValue, description } = this.editedItem
                if (!itemValue) {
                    return this.$Message.error('请输入随访类型')
                }
                if (!description) {
                    return this.$Message.error('请输入描述内容')
                }
				this.updateLoading || (this.updateLoading = true)
				const res = await typeFollowUpdate({ id, key: itemKey, value: itemValue, description })
				this.updateLoading = false
				this.modal(res)
			} else {
                const { value, description  } = this.editedItem
                if (!value) {
                    return this.$Message.error('请输入随访类型')
                }
                if (!description) {
                    return this.$Message.error('请输入描述内容')
                }
				this.createLoading || (this.createLoading = true)
				const res = await typeFollowAdd({ value, description  })
				this.createLoading = false
				this.modal(res)
				//create
			}
            this.typeFollowQueryList()
            this.$store.dispatch('typeFollowQueryList')
			this.close()
		},
		modal(res, title) {
			if (res.code === '0') {
				this.$Modal.success({
					title: title || this.alertTitle,
                    content: res.data,
				})
			} else {
				this.$Modal.warning({
					title: title || this.alertTitle,
                    content: res.errMsg,
				})
			}
		},
		close() {
            this.showDrawer = false
            this.$refs['form'].resetFields();
			setTimeout(() => {
				this.editedItem = Object.assign({}, this.defaultItem)
				this.editedIndex = -1
			}, 10)
		},
		typeFollowQueryList() {
            //不分页
			const { loading } = this
			if (loading) return
			this.loading = true
			typeFollowQueryList()
				.then(res => {
					this.loading = false
					console.log('res roles->', res)
					if (res.code === '0') {
                        this.items = res.data
					} else {
						this.$Modal.warning({
							title: '查询列表',
							content: res.errMsg
						})
					}
				})
				.catch(err => {
					this.loading = false
				})
		}
	},
	watch: {
		showDrawer(after) {
			after || this.close()
		}
	}
}
</script>
<style scoped>
.system-role {
	background-color: #fff;
}
</style>